<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" type="image/png" th:href="@{../images/fav.png}">
    <link rel="stylesheet" th:href="@{../layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{../layui/css/layui.mobile.css}">
    <link rel="stylesheet" th:href="@{../css/bootstrap.min.css}">
    <script th:src="@{../js/jquery-3.2.1.min.js}"></script>
    <script th:src="@{../js/bootstrap.min.js}"></script>
    <script th:src="@{../js/jquery.cookie.js}"></script>
    <title>修改密码</title>
</head>
<body>
<fieldset align="center" class="layui-elem-field layui-field-title" style="margin-top: 20px;color: #FF3333; font-size: large">
    <legend>修改密码</legend>
</fieldset>
    <!-- /.box-header -->
    <!-- form start -->
    <form  name="modify" class="form-horizontal" align="center"style="margin-top: 45px" method="post">
        <input id="updateid" name="updateid" value="" type="hidden"/>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input name="email" id="email" type="text" class="layui-input" style="width: 160px" size="15" placeholder="邮箱">
                    <span id="helpBlock1" class="help-block"></span>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-inline">
                    <input name="newPwd" id="newPwd" type="text"class="layui-input" style="width: 160px" size="15" placeholder="新密码">
                    <span id="helpBlock2" class="help-block"></span>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                    <input name="cfgPwd" id="cfgPwd" type="text" class="layui-input" style="width: 160px" size="15" placeholder="确认密码">
                    <span id="helpBlock3" class="help-block"></span>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <input  type="button" class="layui-btn layui-btn-normal layui-btn-radius" id="btn-captcha" value="获取验证码"/>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" size="10" maxlength="6"style="width: 110px;margin-left: 92px" id="code" placeholder="验证码"/>
                    <span id="helpBlock4"  class="help-block" style="margin-left: 92px"></span>
                </div>

            </div>
        </div>

        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="button" class="layui-btn layui-btn-normal layui-btn-radius" id="updatePwd" value="保存"/>
                <input class="layui-btn layui-btn-primary" type="button" onclick="javascript:history.back()" value="返 回">
            </div>
        </div>
        <!-- /.box-footer -->
    </form>
<script type="text/javascript">

    //var emailVal;//邮箱
    //var newPwdVal;//密码
   // var cfgPwdVal;//确认密码
    function checkEmailForReg() {
        var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        var emailVal = $("#email").val();
        if(!regEmail.test(emailVal)){//验证邮箱
            $("#email").next("span").text("邮箱不符合格式");
            $("#email").parent().addClass("has-error");
            return false;
        }else{
            $("#email").next("span").empty();
            $("#email").parent().removeClass("has-error has-success");
            return true;
        }
    }
    function checkPwdForReg(){//验证密码
        var  newPwdVal = $("input:text[name='newPwd']").val();
        var cfgPwdVal = $("input:text[name='cfgPwd']").val();
        //alert(newPwdVal+cfgPwdVal);
        if(newPwdVal!=''&&newPwdVal!=null&&cfgPwdVal!=''&&cfgPwdVal!=null){
            if(newPwdVal.indexOf(cfgPwdVal)==0 && cfgPwdVal.indexOf(newPwdVal)==0){
                $("#newPwd").next("span").empty();
                $("#newPwd").parent().removeClass("has-error has-success");
                $("#cfgPwd").next("span").empty();
                $("#cfgPwd").parent().removeClass("has-error has-success");
                return true;
            }else {
                $("#cfgPwd").next("span").text("密码不一致");
                return false;
            }
        }else{
            $("#cfgPwd").next("span").text("密码不能为空");
            return false;
        }
    }

    //页面加载
    $(function(){
        if($.cookie("total")!=undefined&&$.cookie("total")!='NaN'&&$.cookie("total")!='null'){//cookie存在倒计时
            timekeeping();
        }else{//cookie 没有倒计时
            $('#btn-captcha').attr("disabled", false);
        }
    });
    //倒计时
    function timekeeping(){
        //把按钮设置为不可以点击
        $('#btn-captcha').attr("disabled", true);
        $('#btn-captcha').css("opacity","0.6");
        var interval=setInterval(function(){//每秒读取一次cookie
            //从cookie 中读取剩余倒计时
            var total=$.cookie("total");
            //在发送按钮显示剩余倒计时
            $('#btn-captcha').val('请等待'+total+'秒');
            //把剩余总倒计时减掉1
            total--;
            if(total==0){//剩余倒计时为零，则显示 重新发送，可点击
                //清除定时器
                clearInterval(interval);
                //删除cookie
                total=$.cookie("total",total, { expires: -1 });
                //显示重新发送
                $('#btn-captcha').val('重新发送');
                //把发送按钮设置为可点击
                $('#btn-captcha').attr("disabled", false);
            }else{//剩余倒计时不为零
                //重新写入总倒计时
                $.cookie("total",total);
            }
        },1000)};
//获取验证码
$("#btn-captcha").click(function () {
    if(checkEmailForReg()&&checkPwdForReg()){
        $("#email").next("span").empty();
        $("#cfgPwd").next("span").empty();
       //  codeButton();
        var date = new Date();
        date.setTime(date.getTime() + (60 * 1000));
        $.cookie('total', 60, { expires: date });  // expires after 1 minute
        //$.cookie("total",60);//设置倒计时 时间
        timekeeping();
     $.ajax({
         url:"/sendEmail",
         type: "post",
         dataType:'json',
         data:{
            "email":$("#email").val()
         },
         success:function (result) {
         }
     })
    }
});
//更新操作
$("#updatePwd").click(function () {
        if(checkEmailForReg()&&checkPwdForReg()){
            if($("#code").val()!=null && $("#code").val()!=''){
                $("#email").next("span").empty();
                $("#newPwd").next("span").empty();
                $("#cfgPwd").next("span").empty();
                $("#code").next("span").empty();
                $.ajax({
                    url:"/view/modifyPwd",
                    type: "post",
                    dataType:'json',
                    data:{
                        "email":$("#email").val(),
                        "code":$("#code").val(),
                        "password":$("#newPwd").val()
                    },
                    success:function (result) {
                        if(result.code==200){
                            $.cookie()
                            alert(result.data.msg);
                            window.location.href="/login";
                        }else{
                            $("#code").next("span").empty();
                            $("#code").next("span").text(result.data.msg);
                        }
                    }
                });
            }else{
                $("#code").next("span").text("验证码不能为空");
                $("#code").parent().addClass("has-error");
            }

        }

    });


  /* function codeButton(){
        var code = $("#btn-captcha");
        code.attr("disabled","disabled");
        setTimeout(function(){
            code.css("opacity","0.8");//设置 div 元素的不透明级别：
        },1000)
        var time = 60;
        var set=setInterval(function(){
            code.val("("+--time+")秒后重新获取");
        }, 1000);
        setTimeout(function(){
            code.attr("disabled",false).val("重新获取验证码");
            clearInterval(set);
        }, 60000);
    };*/

</script>
</body>
</html>